@namespace BulmaRazor.Components
@inherits BulmaComponentBase
@inject BulmaRazorJsInterop JsInterop
@typeparam TItem
<div class="transfer">
    <div class="transfer-side">
        <nav class="panel">
            <p class="panel-heading">
                <span @onclick="() => CheckAll(1, !(leftAll ?? false))" class="transfer-title">
                    <IconCheckBox Color="Color" Checked="@leftAll"></IconCheckBox>
                    @LeftTitle
                </span>
                <span class="transfer-num">
                    @leftCount/@leftView.Count
                </span>
            </p>
            @if (Filterable)
            {
                <div class="panel-block">
                    <div class="control has-icons-left">
                        <input type="text" @bind="leftWord" @bind:event="oninput" @onkeyup="leftWordChange" placeholder="@FilterPlaceholder" class="input is-small"/>
                        <span class="icon is-left">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>
            }
            <div class="panel-block transfer-list">
                <ul style="@ulStyle">
                    @foreach (var item in leftView)
                    {
                        <li class="@B.Join(B.MB2, item.IsHidden ? B.Hidden : "")">

                            <span class="transfer-item @(Color.Value+(item.IsChecked ? " is-checked" : ""))" @onclick="() => ItemCheckChange(item)">
                                <IconCheckBox Color="Color" Checked="item.IsChecked"></IconCheckBox>
                                @item.ShowValue
                            </span>
                        </li>
                    }
                </ul>
            </div>
            @if (LeftFooterSlot != null)
            {
                <div class="panel-block">@LeftFooterSlot</div>
            }

        </nav>

    </div>
    <div class="transfer-middle">
        <div class="buttons is-flex">
            <Button Color="Color" disabled="@(rightCount == 0)" @onclick="() => Trans(rightView, leftView)">
                <span class="icon">
                    <i class="fa fa-angle-left"></i>
                </span>
                @if (LeftButtonText.HasValue())
                {
                    <span>@LeftButtonText</span>
                }
            </Button>
            <Button Color="Color" disabled="@(leftCount == 0)" @onclick="() => Trans(leftView, rightView)">
                @if (RightButtonText.HasValue())
                {
                    <span>@RightButtonText</span>
                }
                <span class="icon">
                    <i class="fa fa-angle-right"></i>
                </span>
            </Button>
        </div>
    </div>
    <div class="transfer-side">
        <nav class="panel">
            <p class="panel-heading">
                <span @onclick="() => CheckAll(2, !(rightAll ?? false))" class="transfer-title">
                    <IconCheckBox Color="Color" Checked="@rightAll"></IconCheckBox>
                    @RightTitle
                </span>

                <span class="transfer-num">
                    @rightCount/@rightView.Count
                </span>
            </p>
            @if (Filterable)
            {
                <div class="panel-block">
                    <div class="control has-icons-left">
                        <input type="text" @bind="rightWord" @bind:event="oninput" @onkeyup="rightWordChange" placeholder="@FilterPlaceholder" class="input  is-small"/>
                        <span class="icon is-left">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>
            }
            <div class="panel-block transfer-list">
                <ul style="@ulStyle">
                    @foreach (var item in rightView)
                    {
                        <li class="@B.Join(B.MB2, item.IsHidden ? B.Hidden : string.Empty)">

                            <span class="transfer-item @(Color.Value+(item.IsChecked ? " is-checked" : ""))" @onclick="() => ItemCheckChange(item)">
                                <IconCheckBox Color="Color" Checked="item.IsChecked"></IconCheckBox>
                                @item.ShowValue
                            </span>
                        </li>
                    }
                </ul>
            </div>
            @if (RightFooterSlot != null)
            {
                <div class="panel-block">@RightFooterSlot</div>
            }
        </nav>
    </div>
</div>